<template>
  <div class="app-container" width="1500">
    <div class="filter-container">
      <el-input v-model="listQuery.projectNum" style="width: 200px;" class="filter-item" placeholder="办件编号" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.developer" style="width: 200px;" class="filter-item" placeholder="开发商" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.building" style="width: 200px;" class="filter-item" placeholder="楼盘" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.householderName" style="width: 200px;" class="filter-item" placeholder="户主姓名" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.address" style="width: 200px;" class="filter-item" placeholder="坐落" @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.tel" style="width: 200px;" class="filter-item" placeholder="手机" @keyup.enter.native="handleFilter"/>
    </div>
    <div class="filter-container">
      <el-select v-model="listQuery.isUrgent" style="width: 200px;" class="filter-item" placeholder="是否加急" @keyup.enter.native="handleFilter">
        <el-option value="" label="全部"/>
        <el-option value="true" label="是"/>
        <el-option value="false" label="否"/>
      </el-select>
      <el-select v-model="listQuery.managentProgress" style="width: 200px;" class="filter-item" placeholder="办理进度" @keyup.enter.native="handleFilter">
        <el-option value="" label="全部"/>
        <el-option value="缴纳契税" label="缴纳契税"/>
        <el-option value="递件办证" label="递件办证"/>
        <el-option value="权证领取" label="权证领取"/>
        <el-option value="受理抵押" label="受理抵押"/>
      </el-select>
      <el-select v-model="listQuery.paymentProgress" style="width: 200px;" class="filter-item" placeholder="款项进度" @keyup.enter.native="handleFilter">
        <el-option value="" label="全部"/>
        <el-option value="全款完结" label="全款完结"/>
        <el-option value="贷款完结" label="贷款完结"/>
      </el-select>
      <el-select v-model="listQuery.deliveryProgress" style="width: 200px;" class="filter-item" placeholder="交付进度" @keyup.enter.native="handleFilter">
        <el-option value="" label="全部"/>
        <el-option value="通知客户" label="通知客户"/>
        <el-option value="交付客户" label="交付客户"/>
        <el-option value="回执房开" label="回执房开"/>
      </el-select>
      <el-date-picker
        v-model="listQuery.startTime"
        type="date"
        placeholder="开始日期"/>
      <el-date-picker
        v-model="listQuery.endTime"
        type="date"
        placeholder="结束日期"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <!--<el-table-column align="center" label='序号'>
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>-->
      <el-table-column label="办件编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.project_num }}
        </template>
      </el-table-column>
      <el-table-column label="开发商" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.developer }}</span>
        </template>
      </el-table-column>
      <el-table-column label="楼盘" align="center">
        <template slot-scope="scope">
          {{ scope.row.building }}
        </template>
      </el-table-column>
      <el-table-column label="坐落" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="户主姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.householder_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.tel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证" align="center">
        <template slot-scope="scope">
          {{ scope.row.identity_num }}
        </template>
      </el-table-column>
      <el-table-column label="是否加急" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.is_urgent | getUrgentState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="办理进度" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.managent_progress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="款项进度" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payment_progress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交付进度" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.delivery_progress }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.create_time | formatDateFilters }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <!--<el-button type="primary" size="small" style="margin-left: 10px;" @click="getTaskInfo(scope.$index,'detail')">详情</el-button>-->
          <el-button type="success" size="small" @click="getProjectInfo(scope.$index,'edit')">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.pageNum" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      top="8vh"
      title="详情"
      width="70%">
      <div class="form">
        <el-form ref="form" :model="form" :rules="formRules" label-position="top">
          <v-box>
            <span slot="title">修改办件</span>
            <div slot="content">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="办件编号" prop="projectNum">
                    <el-input v-model="form.projectNum" autofocus="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开发商" prop="developer">
                    <el-select v-model="form.developer">
                      <el-option value="碧桂园" label="碧桂园"/>
                      <el-option value="滨江" label="滨江"/>
                      <el-option value="大城" label="大城"/>
                      <el-option value="大发" label="大发"/>
                      <el-option value="德信" label="德信"/>
                      <el-option value="多弗" label="多弗"/>
                      <el-option value="富力" label="富力"/>
                      <el-option value="鸿地" label="鸿地"/>
                      <el-option value="华鸿" label="华鸿"/>
                      <el-option value="华润" label="华润"/>
                      <el-option value="金茂" label="金茂"/>
                      <el-option value="蓝光" label="蓝光"/>
                      <el-option value="龙湖" label="龙湖"/>
                      <el-option value="绿城" label="绿城"/>
                      <el-option value="绿地" label="绿地"/>
                      <el-option value="融创" label="融创"/>
                      <el-option value="万科" label="万科"/>
                      <el-option value="新城" label="新城"/>
                      <el-option value="新希望" label="新希望"/>
                      <el-option value="旭辉" label="旭辉"/>
                      <el-option value="阳光100" label="阳光100"/>
                      <el-option value="阳光城" label="阳光城"/>
                      <el-option value="远洋" label="远洋"/>
                      <el-option value="中梁" label="中梁"/>
                      <el-option value="中南" label="中南"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="楼盘" prop="building">
                    <el-input v-model="form.building " autofocus="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="坐落" prop="address">
                    <el-input v-model="form.address " autofocus="true"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="户主姓名" prop="householderName">
                    <el-input v-model="form.householderName" autofocus="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机" prop="tel">
                    <el-input v-model="form.tel " autofocus="true"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="身份证" prop="identityNum">
                    <el-input v-model="form.identityNum" autofocus="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否加急" prop="isUrgent">
                    <el-checkbox v-model="form.isUrgent">加急</el-checkbox>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="办理进度" prop="managentProgress">
                    <el-select v-model="form.managentProgress">
                      <el-option value="缴纳契税" label="缴纳契税"/>
                      <el-option value="递件办证" label="递件办证"/>
                      <el-option value="权证领取" label="权证领取"/>
                      <el-option value="受理抵押" label="受理抵押"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="款项进度" prop="paymentProgress">
                    <el-select v-model="form.paymentProgress">
                      <el-option value="全款完结" label="全款完结"/>
                      <el-option value="贷款完结" label="贷款完结"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="交付进度" prop="deliveryProgress">
                    <el-select v-model="form.deliveryProgress">
                      <el-option value="通知客户" label="通知客户"/>
                      <el-option value="交付客户" label="交付客户"/>
                      <el-option value="回执房开" label="回执房开"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item class="form-foot">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
              </el-form-item>
            </div>
          </v-box>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import box from '@/components/Base/Box'
import { formatDate } from '@/utils/formatDate'
import { getProjectList, updateProjectInfo } from '@/api/project'

export default {
  components: {
    'v-box': box
  },
  filters: {
    formatDateFilters(time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    },
    getUrgentState(value) {
      if (value) {
        return '是'
      } else {
        return '否'
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      listIndex: 0,
      list: [],
      listLoading: true,
      total: undefined,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        projectNum: undefined,
        developer: undefined,
        building: undefined,
        householderName: undefined,
        address: undefined,
        tel: undefined,
        isUrgent: undefined,
        managentProgress: undefined,
        paymentProgress: undefined,
        deliveryProgress: undefined,
        startTime: undefined,
        endTime: undefined
      },
      form: {
        id: null,
        projectNum: '', // 办件编号
        developer: '', // 开发商
        building: '', // 楼盘
        householderName: '', // 户主姓名
        address: '', // 坐落
        tel: '', // 手机
        identityNum: '', // 身份证
        isUrgent: false, // 是否加急
        managentProgress: '', // 办理进度
        paymentProgress: '', // 款项进度
        deliveryProgress: '' // 交付进度
      },
      formRules: {
        projectNum: [
          { required: true, message: '请输入办件编号', trigger: 'blur' }
        ],
        developer: [
          { required: true, message: '请输入开发商', trigger: 'blur' }
        ],
        building: [
          { required: true, message: '请输入楼盘', trigger: 'blur' }
        ],
        householderName: [
          { required: true, message: '请输入户主姓名', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getProjectList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    getProjectInfo(index, operation) {
      // 清除验证提示信息
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].clearValidate()
      }
      this.dialogVisible = true
      this.listIndex = index
      // 初始化
      this.form.id = this.list[index].id
      this.form.projectNum = this.list[index].project_num
      this.form.developer = this.list[index].developer
      this.form.building = this.list[index].building
      this.form.householderName = this.list[index].householder_name
      this.form.address = this.list[index].address
      this.form.tel = this.list[index].tel
      this.form.identityNum = this.list[index].identity_num
      this.form.isUrgent = this.list[index].is_urgent
      this.form.managentProgress = this.list[index].managent_progress
      this.form.paymentProgress = this.list[index].payment_progress
      this.form.deliveryProgress = this.list[index].delivery_progress
    },
    onSubmit() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(that.form)
          updateProjectInfo(that.form).then(response => {
            if (response.code === 200) {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              // 更新列表
              this.list[this.listIndex].id = this.form.id
              this.list[this.listIndex].project_num = this.form.projectNum
              this.list[this.listIndex].developer = this.form.developer
              this.list[this.listIndex].building = this.form.building
              this.list[this.listIndex].householder_name = this.form.householderName
              this.list[this.listIndex].address = this.form.address
              this.list[this.listIndex].tel = this.form.tel
              this.list[this.listIndex].identity_num = this.form.identityNum
              this.list[this.listIndex].is_urgent = this.form.isUrgent
              this.list[this.listIndex].managent_progress = this.form.managentProgress
              this.list[this.listIndex].payment_progress = this.form.paymentProgress
              this.list[this.listIndex].delivery_progress = this.form.deliveryProgress

              this.dialogVisible = false
            } else {
              this.$message({
                type: 'error',
                message: '保存失败!'
              })
            }
          })
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
    }
  }
}
</script>
<style scoped>
.main{
  padding: 15px;
  color: rgb(8, 7, 7);
}

.filter-container{
  margin-bottom: 10px;
}

.el-table{
  margin-bottom: 2%
}
.tdStyle > td > .cell{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress-title{
    font-size: 14px;
    color: #606266;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0px;
    line-height: 30px;
}
#index  /deep/  .el-select .el-input {
    width: 130px;
  }
.form{
  width: 1024px;
  margin: 15px auto;
  background: #ffffff;
  padding: 15px;
  border-radius: 5px;
}
.form-foot{
  text-align: right;
  /*background: #eee;*/
  padding: 10px 10px;
}

</style>
